import { Button, Space, Table, Drawer, message } from "antd";
import CommonModal from "@/components/CommonModal";

import { DownOutlined, FileTextOutlined, BarsOutlined, CloudDownloadOutlined, CloudUploadOutlined } from "@ant-design/icons";
import { useState, useRef, useImperativeHandle, useCallback } from "react";
import SelectActions from "@/views/components/SelectActions";
import { queryMemberPriceApplyLogList } from "../../service";
import { SearchSimpleTable } from "@/views/components/SearchTable/index";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
import { getLogColumns } from "../../columns";
import { formatAmount } from "@/utils/utils.jsx";
import ActionExportExcelModal from "./ActionExportExcelModal";
import { useNavigate } from "react-router-dom";
import CommonDrawer from '@/components/CommonDrawer';
const ExportBtn = ({ query }) => {
	const [visible, setVisible] = useState(false);

	const businessParamObj = {
		businessKey: 1
	};
	if (typeof query === "object" && Object.values(query).some(Boolean)) {
		businessParamObj.param = query;
		businessParamObj.businessKey = 2;
	}
	const exportProps = {
		onCancel: () => setVisible(false),
		createTaskData: {
			businessParam: JSON.stringify(businessParamObj),
			taskType: 3010
		}
	};

	return (
		<>
			<Button onClick={() => setVisible(true)}>导出</Button>
			{visible && <ActionExportExcelModal {...exportProps} />}
		</>
	);
};

const AssociateOrderBtn = ({ id, dataSource, wrap }) => {
	const [open, setOpen] = useState(false);
	const [exportVisible, setExportVisible] = useState(false);
	const navigate = useNavigate();
	const publicHandleClick = (pathname, orderSn) => {
		let timer = setTimeout(() => {
			clearTimeout(timer);
			timer = null;
			navigate(pathname, { state: { orderSn } });
		}, 200);
	};
	const exportProps = {
		onCancel: () => setExportVisible(false),
		createTaskData: {
			businessParam: JSON.stringify({
				ids: [id],
				businessKey: 3
			}),
			taskType: 3011
		}
	};

	const renderJumptOrderHandle = orderSn => {
		return (
			<>
				<span
					className="common-color1"
					style={{ cursor: "pointer" }}
					onClick={() => publicHandleClick("/views/order/list", orderSn)}
				>
					{orderSn}
				</span>
			</>
		);
	};

	const exportHandle = () => {
		if (dataSource.length == 0) {
			return message.warning("无数据");
		}
		setExportVisible(true);
	};

	const btnDom = useRef();

	return (
		<>
			<Button ref={btnDom} onClick={() => setOpen(true)} type="link">
				关联订单号
			</Button>
			{exportVisible && <ActionExportExcelModal {...exportProps} />}
			<CommonModal
				getContainer={() => wrap.current}
				title="关联订单号"
				visible={open}
				onCancel={() => setOpen(false)}
				okText="导出"
				onOk={exportHandle}
				zIndex={9999}
			>
				<div style={{ textAlign: "left" }}>
					<Button onClick={exportHandle}>导出</Button>
				</div>
				<Table
					pagination={false}
					dataSource={dataSource}
					columns={[
						{
							title: "系统订单号",
							dataIndex: "orderId",
							key: "orderId",
							render: text => {
								return renderJumptOrderHandle(text);
							}
						},
						{
							title: "变动金额",
							dataIndex: "price",
							key: "price",
							render: text => {
								if (text) {
									if (text.toString().includes("-")) {
										return <span className="common-color10">{formatAmount(text)}</span>;
									} else {
										return <span className="common-color9">+{formatAmount(text)}</span>;
									}
								} else {
									return "0.00";
								}
							}
						}
					]}
				></Table>
			</CommonModal>
		</>
	);
};

const LogDrawer = props => {
	const tableKey = "memberPriceTable_Log";

	const { columns } = getLogColumns({
		actionBtns: record => <AssociateOrderBtn wrap={props.wrap} id={record.id} dataSource={record.orderList} />
	});
	const {
		selectedKeys,
		selectedRows,
		fetchList,
		dataSource,
		form,
		query,
		pagination,
		updateDataSource,
		updateSearchQuery,
		updatePaginationParams,
		searchSimpleTableProps
	} = useTableConfig({
		tableKey,
		rowKey: "id",
		columns,
		tableRequest: queryMemberPriceApplyLogList,
		autoFetch: true,
		hasPagination: true,
		hasQuickSearch: false,
		beforeQuerySearch: false,
		resetSourceData: false,
		hasColsSetting: false,
		hasToggleSearchForm: false,
		columnResize: true
		// hasQueryLocation: "/views/goods/shop"
	});
	return (
		<CommonDrawer
			getContainer={false}
			title="会员价修改日志"
			placement="right"
			open={props.open}
			onClose={() => props.onClose()}
			width="90%"
			destroyOnClose
		>
			<SearchSimpleTable key={tableKey} leftBtns={<ExportBtn query={query} />} {...searchSimpleTableProps}></SearchSimpleTable>
		</CommonDrawer>
	);
};

/*

 */

const RightBtns = (props, ref) => {
	const { query, selectedRows, isSkuType, handleCommand, children } = props;

	const [open, setOpen] = useState(false);
	const wrapperRef = useRef();

	return (
		<div ref={wrapperRef}>
			<Space>
				<Button
					icon={<FileTextOutlined style={{ marginRight: 4, color: "#0068FF" }} />}
					type="link"
					onClick={() => setOpen(true)}
				>
					<span style={{ color: "#555" }}>查看日志</span>
				</Button>
				{children}
			</Space>
			<LogDrawer wrap={wrapperRef} open={open} onClose={() => setOpen(false)} />
		</div>
	);
};
export default RightBtns;
